.blogs{
	width: 100%;
	// border: 1px solid;
	min-height: 800px;
	font-family: Lato,"Microsoft Jhenghei","Hiragino Sans GB","Microsoft YaHei",sans-serif;
	font-size: 14px;
	color: #373a3c;
	line-height: 2;
	padding-top: 100px;
	.loading{
		position: fixed;
		margin: 0 auto;
		width: 100%;
	}
	
	@media (max-width: 500px) {
		.main{
			width: 100%;
		}
		.content{
			display: none;
		}
	}
	@media (min-width: 501px) {
		.main{
			width: 80%;
		}
		.content{
			display: block;
		}
	}
	.main{
		min-height: 800px;
		margin: 0 auto;
		margin-bottom: 20px;
		text-align: left;
		.blog{
			background: #fff;
			padding: 10px 20px 30px 20px;
			margin-top: 35px;
			.title{
				// border-bottom: 1px solid;
				height: 70px;
				p{
					a{
						color: #818a91;
						cursor:pointer;
					}
				}
				a:hover{
					text-decoration: none;
					// border-bottom: 1px dashed #c8c8c8;
					border-bottom:2px solid;
				}
				span{
					color: #333;
					font-size: 10px;
				}
			}
			.tags{
				clear: both;
				border-bottom: 1px solid #373a3c;
				span{
					float: left;
				}
				.icon{
					border-radius: 50%;
					background: red;
					width: 10px;
					float: left;
					height: 10px;
					margin-top: 8px;
				}
				a{
					margin-left: 5px;
					display: inline-block;
					max-width: 100%;
					height: 24px;
					font-weight: 800;
					// margin: 0 10px 5px 0;
					// line-height: 24px;
					// padding: 0 8px 0 18px;
					// border-radius: 0 4px 4px 0;
					// background: #eee;
					font-size: 12px;
					color: #333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					box-sizing: border-box;
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					cursor:pointer;
				}
				a:hover{
					text-decoration: none;
				}
				a::before{

				}
			}
			.content{
				clear: both;
				overflow: hidden;
				text-overflow: ellipsis;
				height: 160px
			}
			.read{
				margin: 30px 0;
				a{
					display: inline-block;
					padding: 5px 30px;
					text-decoration: none;
					color: #818a91;
					border: 2px solid #e3e3e3;
					cursor:pointer;
				}
				a:hover{
					color: #747d85;
					border-color: #747d85;
					outline: 0;
					-webkit-transition: all .5s linear;
				}
			}
		}
		.blog:hover{
			// box-shadow: 0 0 5px rgba(0,0,0,.3);
			// opacity: .8;
			transform: translateY(-2%);
			box-shadow: 1px 4px 10px 2px #CCC;
			-webkit-box-shadow: 1px 4px 10px 2px #CCC;
			-webkit-transition: all .4s;
		}
	}
	.loadmore{
		width: 80%;
		margin: 0 auto;
		a{
			border: 2px solid #ddd;
			padding: 8px 15px;
			color: #818a91;
			cursor:pointer;
			font-size: 16px;
		}
		a:hover{
			border: 2px solid #333;
			text-decoration: none;
		}
	}
}

.blog{
	padding-top: 20px;
	width: 100%;
	.top{
		margin-top: 100px;
		.title{
			a{
				color: #818a91;
			}
			a:hover{
				text-decoration: none;
				border-bottom: 1px dashed #c8c8c8;
			}
		}
	}
	@media (max-width: 500px) {
		.main{
			width: 100%;
		}
	}
	@media (min-width: 501px) {
		.main{
			width: 80%;
		}
	}
	.main{
		margin: 0 auto;
		padding: 20px;
		text-align: left;
		background: #fff;
		opacity: .7;
		margin-top: 20px;
	}
	.bov{
		margin: 0 auto;
		border-top: 1px solid #333;
		width: 80%;
		margin-top: 20px;
		height: 160px;
		border-bottom: 1px dashed;
		padding-top: 20px;
		.pre{
			width: 50%;
			float: left;
			text-align: left;
		}
		.next{
			width: 50%;
			float: right;
			text-align: right;
		}
	}
}
.content{
	margin-top: 30px;
	text-indent: 2rem;
	p > code {
		padding: 4px 8px;
		font-size: 14px;
		color: #657b83;
		background-color: #f9f2f4;
		border-radius: 4px;
	}
	pre{
		overflow: auto;
		display: block;
		padding: 9.5px;
		margin: 0 0 10px;
		font-size: 13px;
		line-height: 20px;
		word-break: break-all;
		word-wrap: break-word;
		white-space: pre;
		white-space: pre-wrap;
		background-color: #f5f5f5;
		border: 1px solid #ccc;
		border: 1px solid rgba(0,0,0,0.15);
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		background: #fdf6e3;
		color: #657b83;
	}
	table{
		margin-bottom: 20px;
		border: 1px solid #dddddd;
		width: 100%;
		background-color: transparent;
		border-collapse: collapse;
		border-spacing: 0;
		font-size: 16px;
	}
	table thead th{
		border: 1px solid #dddddd;
		height: 30px; 
		padding: 0 10px;
	}
	table tbody td{
		height: 30px;
		border: 1px solid #dddddd;
		padding: 0 10px;
	}
	table tbody tr:hover{
		background: #f5f5f5;
	}
	h1{
		font-size: 48px;
	}
	h2{
		font-size: 42px;
	}
	img{
		width: 80%;
		margin: 0 auto;
	}
}